<template>
  <div>
    <validator name="v">
      <modal :show.sync="show" v-ref:modal  backdrop="false">
        <header slot="modal-header" class="modal-header">
          <button type="button" class="close" @click="rest"><span>&times;</span></button>
          <h4 class="modal-title">修改密码</h4>
        </header>
        <article slot="modal-body" class="modal-body modifystyle auto form-horizontal">
          <div class="has-feedback form-group"
          :class="{'has-warning':$v.password.required,'has-error':$v.password.equalValid && !($v.password.required),
          'has-success': !$v.password.required && !($v.password.equalValid && !($v.password.required))}">
            <label for="password" class="col-sm-4 col-sm-offset-1 control-label">原始密码:&nbsp;&nbsp;</label>
            <div class="col-sm-4">
              <input type="password" v-model="deliver.password" class="form-control" id="password" v-validate:password="{ required: true, equalValid: functions.password }">
              <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.password.required && !($v.password.equalValid && !($v.password.required))"></span>
              <!-- <span class="glyphicon form-control-feedback"
              :class="{'glyphicon-warning-sign':$v.password.required,'glyphicon-remove'$v.password.equalValid && !($v.password.required):,
              'glyphicon-ok':!$v.password.required && !($v.password.equalValid && !($v.password.required))}"></span> -->
              <span v-if="$v.password.required">不能为空</span>
              <span v-if="$v.password.equalValid && !($v.password.required)">原始密码错误 !!</span>
            </div>
          </div>
          <div class="has-feedback form-group"
          :class="{'has-warning':$v.newpassword.required, 'has-success': !$v.newpassword.required}">
            <label for="newpassword" class="col-sm-4 col-sm-offset-1 control-label">新的密码:&nbsp;&nbsp;</label>
            <div class="col-sm-4">
              <input type="password" v-model="deliver.newpassword" class="form-control" id="newpassword" v-validate:newpassword='{ required: true }'>
              <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.newpassword.required"></span>
              <span v-if="$v.newpassword.required">不能为空</span>
            </div>
          </div>
          <div class="has-feedback form-group"
          :class="{'has-warning':$v.affirmpassword.required,'has-error':$v.affirmpassword.equalValid && !($v.affirmpassword.required),
          'has-success': !$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))}">
            <label for="affirmpassword" class="col-sm-4 col-sm-offset-1 control-label">确认密码:&nbsp;&nbsp;</label>
            <div class="col-sm-4">
              <input type="password" v-model="deliver.affirmpassword" class="form-control" id="affirmpassword" v-validate:affirmpassword="{ required: true, equalValid: deliver.newpassword }">
              <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))"></span>
              <span v-if="$v.affirmpassword.required">不能为空</span>
              <span v-if="$v.affirmpassword.equalValid && !($v.affirmpassword.required)">两次密码不一致 !!</span>
            </div>
          </div>
        </article>

        <footer slot="modal-footer" class="modal-footer">
          <button  type="button" class="btn btn-success" @click='confirm' :disabled="!$v.valid">确认</button>
          <button  type="button" class="btn btn-default" @click='rest'>取消</button>
        </footer>
      </modal>
      <!-- <div class="has-feedback form-group"
      :class="{'has-warning':$v.password.required,'has-error':$v.password.equalValid && !($v.password.required),
      'has-success': !$v.password.required && !($v.password.equalValid && !($v.password.required))}">
        <label for="password" class="col-sm-1 col-sm-offset-4 control-label">原始密码:&nbsp;&nbsp;</label>
        <div class="col-sm-2">
          <input type="password" v-model="deliver.password" class="form-control" id="password" v-validate:password="{ required: true, equalValid: functions.password }">
          <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.password.required && !($v.password.equalValid && !($v.password.required))"></span>
          <span v-if="$v.password.required">不能为空</span>
          <span v-if="$v.password.equalValid && !($v.password.required)">原始密码错误 !!</span>
        </div>
      </div>
      <div class="has-feedback form-group"
      :class="{'has-warning':$v.newpassword.required, 'has-success': !$v.newpassword.required}">
        <label for="newpassword" class="col-sm-1 col-sm-offset-4 control-label">新的密码:&nbsp;&nbsp;</label>
        <div class="col-sm-2">
          <input type="password" v-model="deliver.newpassword" class="form-control" id="newpassword" v-validate:newpassword='{ required: true }'>
          <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.newpassword.required"></span>
          <span v-if="$v.newpassword.required">不能为空</span>
        </div>
      </div>
      <div class="has-feedback form-group"
      :class="{'has-warning':$v.affirmpassword.required,'has-error':$v.affirmpassword.equalValid && !($v.affirmpassword.required),
      'has-success': !$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))}">
        <label for="affirmpassword" class="col-sm-1 col-sm-offset-4 control-label">确认密码:&nbsp;&nbsp;</label>
        <div class="col-sm-2">
          <input type="password" v-model="deliver.affirmpassword" class="form-control" id="affirmpassword" v-validate:affirmpassword="{ required: true, equalValid: deliver.newpassword }">
          <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))"></span>
          <span v-if="$v.affirmpassword.required">不能为空</span>
          <span v-if="$v.affirmpassword.equalValid && !($v.affirmpassword.required)">两次密码不一致 !!</span>
        </div>
      </div>
      <div class="col-sm-3 col-sm-offset-4">
        <center>
          <button  type="button" class="btn btn-success" @click='confirm' :disabled="!$v.valid">确认</button>
          <button  type="button" class="btn btn-default" @click='rest'>取消</button>
        </center>
      </div> -->
    </validator>
  </div>


</template>
<script>
import co from 'co'
import * as Util from '../Util'

let saveGen = function * (self) {
  self.deliver.ename = self.functions.ename
  // let res = yield self.$post('rs/user/entity', {data: self.deliver})
  // let res = yield self.$post('rs/db/modifypassword', {data: self.deliver})
  // let res = yield self.$resetpost('/rs/db/modifypwd', {data: self.deliver})
  //  Util.f.password = self.deliver.newpassword
  let res = yield self.$post('/rs/db/modifypassword', self.deliver)
  if (res.data) {
    self.deliver.password = ''
    self.deliver.newpassword = ''
    self.deliver.affirmpassword = ''
    self.show = false
  }
}
export default {
  title: '系统管理-密码修改',
  data () {
    return {
      deliver: {
        password: '',
        newpassword: '',
        affirmpassword: ''
      },
      functions: Util.f
    }
  },
  props: ['show'],
  methods: {
    confirm () {
      let gen = saveGen(this)
      co(gen)
    },
    rest () {
      this.show = false
      this.deliver = {password: '', newpassword: '', affirmpassword: ''}
    },
  }
}
</script>
<style>
  /*修改密码body界面样式*/
  .modifystyle {
    background: #FCFEEE;
  }
   .modifystyle span{
     color: red;
   }
</style>
